<div class="alarm-detail-wrap">
    <header class="page-header clearfix">
        <h4><a ng-href="#/alarm/k8s-pre"><i class="fa fa-arrow-left"></i></a><span ng-if="::dtl.edit">编辑告警规则</span><span ng-if="::!dtl.edit">创建告警规则</span></h4>
        <ol class="breadcrumb">
            <li><a ng-href="#/alarm/k8s-pre">告警</a></li>
            <li class="active">告警规则</li>
        </ol>
    </header>
    <ui-panel class="service-create-container">
        <form name="form" class="form-horizontal" novalidate ng-submit="form.$valid && dtl.save()">
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="text-danger">*</span>集群：</label>
                <div class="col-sm-3" >
                    <select ng-model="dtl.clusterInst" class="form-control"
                            ng-options="opt as opt.clusterName for opt in ::dtl.clusters" ng-change="dtl.getAlertTypes();dtl.getRCList();dtl.getDPList()" ng-disabled="::dtl.edit">
                    </select>
                </div>
            </div>
            <div class="form-group" ng-class="{'has-error': form.alertName.$error.required && (form.$submitted || form.alertName.$touched)}">
                <label class="col-sm-2 control-label"><span class="text-danger">*</span>告警名称：</label>
                <div class="col-sm-3">
                    <input type="text" placeholder="请输入告警名称" class="form-control" ng-model="dtl.data.alertName"  name="alertName" required/>
                </div>
                <div class="text-danger col-sm-4 s-label" ng-show="form.alertName.$error.required && (form.$submitted || form.alertName.$touched)">请输入告警名称</div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="text-danger">*</span>预警规则：</label>
                <div class="col-sm-10">
                    <p class="s-label tips"><i class="fa fa-question margin-right-5"></i>任何一条规则满足条件即触发报警</p>

                    <table class="table table-hover alarm-table margin-bottom-10">
                        <thead>
                            <tr>
                                <td style="width:25%">报警项</td>
                                <td style="width:75%">报警阀值</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-if="!dtl.ruleLoading" ng-repeat="elem in dtl.ruleList track by $index">
                                <td>
                                    <select class="form-control" ng-model="elem.alertItemId" ng-options="opt.id as opt.description+'('+opt.unit+')' for opt in ::dtl.typeList"></select>
                                </td>
                                <td>
                                    <div class="row">
                                        <div class="col-sm-3">
                                            <select class="form-control" ng-model="elem.opts" ng-options="opt.type as opt.name for opt in ::dtl.optsList" >
                                            </select>
                                        </div>
                                        <div class="col-sm-2 col-desc-padding">
                                            <div class="form-group" style="margin:0" ng-class="{'has-error': (form['min'+$index].$error.required || form['min'+$index].$error.number
                                            || form['min'+$index].$error.min || form['min'+$index].$error.max) && (form.$submitted || form['min'+$index].$touched)}">
                                                <input type="number" class="form-control" name="min{{$index}}" placeholder="最小值" ng-model="elem.min" min="0" max="100" required/>
                                            </div>
                                        </div>
                                        <div class="col-sm-2 col-desc-padding">
                                            <div class="form-group" style="margin:0" ng-class="{'has-error': (form['max'+$index].$error.required || form['max'+$index].$error.number
                                            || form['max'+$index].$error.min || form['max'+$index].$error.max) && (form.$submitted || form['max'+$index].$touched)}">
                                                <input type="number" class="form-control" placeholder="最大值" name="max{{$index}}"
                                                       ng-model="elem.max" ng-min="(['rt','rte'].indexOf(elem.opts) != -1) ? +elem.min+1 : 0"
                                                       max="100" ng-disabled="['rt','rte'].indexOf(elem.opts) == -1"
                                                       ng-required="['rt','rte'].indexOf(elem.opts) != -1"/>
                                            </div>
                                        </div>
                                        <div class="col-sm-1 col-desc-padding"><div class="s-label">%</div></div>
                                        <div class="col-sm-1 col-desc-padding"><a ng-click="dtl.delRule($index)" style="cursor: pointer;" title="删除" class="s-label"><i class="fa fa-times fa-lg"></i></a></div>
                                        <div class="col-sm-3 col-desc-padding">
                                            <div class="text-danger s-label" ng-show="form['min'+$index].$touched || form['max'+$index].$touched || form.$submitted">
                                                {{((form['min'+$index].$error.required || form['min'+$index].$error.number || form['min'+$index].$error.min || form['min'+$index].$error.max
                                                || form['max'+$index].$error.required || form['max'+$index].$error.number || form['max'+$index].$error.max) && '请输入100以内数值')
                                                || (form['max'+$index].$error.min && '最大值不能小于最小值') || ''}}
                                            </div>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>

                    </table>
                    <!--Loading-->
                    <div class="loading" ng-if="dtl.ruleLoading"></div>
                    <a style="cursor: pointer" ng-click="dtl.addRule()"><i class="fa fa-plus margin-right-5"></i>添加报警规则</a>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="text-danger">*</span>预警对象：</label>
                <!-- rc列表 -->
                <div class="col-sm-8" >
                    <div class="clearfix">
                        <div class="col-sm-4 form-group btn-group">
                            <button type="button" class="btn btn-default" ng-class="{'btn-info': !dtl.showRc}" ng-click="dtl.showRc=false" >全部服务
                            </button>
                            <button type="button" class="btn btn-default" ng-class="{'btn-info': dtl.showRc}" ng-click="dtl.showRc=true">指定服务
                            </button>
                        </div>
                        <div class="col-sm-4 text-danger s-label" ng-show="dtl.showRc && dtl.selectList.length==0 && form.$submitted">请选择服务</div>
                    </div>

                    <div ng-show="dtl.showRc">
                        <ul class="list-inline">
                            <li ng-if="dtl.selectList.length">
                                <div ng-click="dtl.expendSelList()" class="select-item"
                                     ui-tooltip="{{dtl.selListExpend ? '切换至服务列表': '展开已选服务'}}">{{dtl.selectList.length}}
                                    <i ng-if="!dtl.selListExpend" class="fa fa-plus margin-left-10"></i>
                                    <i ng-if="dtl.selListExpend" class="fa fa-minus margin-left-10"></i>
                                </div>
                            </li>
                            <li ng-repeat="elem in dtl.selectList" ng-if="dtl.selListExpend" >
                                <div ng-click="dtl.unObSel($index,elem)" class="select-item">{{::elem.name?elem.name:elem.objectMeta.name}}<i class="fa fa-close margin-left-5" ></i></div>
                            </li>
                        </ul>
                        <div ng-show="!dtl.selListExpend" >
                            <div class="table-fixed-group">
                                <div class="clearfix table-fixed-header">
                                    <div class="col-sm-8">服务列表
                                        <div class="header-filter margin-left-10"><i class="fa fa-filter"></i>
                                            <input placeholder="请输入服务名字查询" ng-model="dtl.searchRcName" type="text"/>
                                        </div>
                                    </div>
                                    <div class="col-sm-4">Pod</div>
                                </div>
                                <div class="table-fixed-box">
                                    <table class="table table-hover">
                                        <tbody>
                                        <!-- dp服务 -->
                                        <tr ng-repeat="elem in dtl.dpList | filter: dtl.searchRcName" ng-click="dtl.selectObItem(elem)" ng-class="{'info':elem.checked}">
                                            <td width="70%">{{::elem.objectMeta.name}}</td>
                                            <td width="30%">
                                                <ul class="list-inline">
                                                    <li ui-tooltip="{{::elem.pods.running}} Running" class="text-success"><i class="fa fa-circle"></i> {{::elem.pods.running}}</li>
                                                    <li ui-tooltip="{{::elem.pods.desired}} Desired"><i class="fa fa-circle"></i> {{::elem.pods.desired}}</li>
                                                </ul>
                                            </td>
                                        </tr>

                                        <!-- rc服务 -->
                                        <tr ng-repeat="elem in dtl.rcList | filter: dtl.searchRcName" ng-click="dtl.selectObItem(elem)" ng-class="{'info':elem.checked}">
                                            <td width="70%">{{::elem.name}}</td>
                                            <td width="30%">
                                                <ul class="list-inline">
                                                    <li ui-tooltip="{{::elem.podInfo.running}} Running" class="text-success"><i class="fa fa-circle"></i> {{::elem.podInfo.running}}</li>
                                                    <li ui-tooltip="{{::elem.podInfo.desired}} Desired"><i class="fa fa-circle"></i> {{::elem.podInfo.desired}}</li>
                                                </ul>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                    <div class="loading" ng-show="!dtl.dpList"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-2 control-label">报警通知：</label>
                <p class="tips s-label"><i class="fa fa-question margin-right-5"></i>用于接收报警的手机号码和邮箱</p>
            </div>
            <div class="form-group" ng-class="{'has-error': (form.phone.$error.required || form.phone.$error.pattern)
                && (form.$submitted || form.phone.$touched)}">
                <label class="col-sm-2 control-label"><span class="text-danger">*</span>手机：</label>
                <div class="col-sm-3 form-group">
                    <input type="text" placeholder="请输入接收报警的手机号码" class="form-control" ng-model="dtl.data.phone" name="phone"
                           required maxlength="11" ng-pattern="/^1[34578]\d{9}/" />
                </div>
                <div class="text-danger col-sm-4 s-label" ng-show="(form.phone.$error.required || form.phone.$error.pattern)
                && (form.$submitted || form.phone.$touched)">请输入正确的手机号码</div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">邮箱：</label>
                <div class="col-sm-3 form-group">
                    <input type="text" placeholder="请输入接收报警的邮箱" class="form-control" ng-model="dtl.data.email"/>
                </div>
            </div>-->
            <div class="panel-form-footer">
                <a ui-sref="alarm-k8s-pre" class="btn btn-default btn-sm">取消</a>
                <button type="submit" ng-disabled="dtl.loading" class="btn btn-primary btn-sm pull-right"><i ng-show="dtl.loading" class="fa fa-cog fa-lg fa-spin margin-right-5" />确定</button>
            </div>
        </form>
    </ui-panel>

</div>
